<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

	<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		body {
			font-size: 14px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
		}

		#optiongroup {
			margin: 50px;
		}
	</style>

</head>

<body>

<div id="optiongroup"></div>

<input type="radio" name="radio" value="" id="radio1" />
<input type="radio" name="radio" value="" id="radio2" />
<input type="radio" name="radio" value="" id="radio3" />

<script type="text/javascript" charset="utf-8">

	if (window.widget) {
		widget.setNavigationEnabled(false);
	}

	var init = function() {

		var radio1 = new Nokia.RadioBox({
			element: '#radio1',
			checked: true,
			label: 'testing radio 1',
			wrapper: 'div',
			create: function() {
				console.log('Radiobox: Create');
			},
			check: function(event) {
				console.log('Radiobox: Check', this, event);
			},
			uncheck: function(event) {
				console.log('Radiobox: Uncheck', this, event);
			},
			push: function(event) {
				console.log('Radiobox: Push', this, event);
			},
			clear: function(event) {
				console.log('Radiobox: Clear', this, event);
			}
		});

		var radio2 = new Nokia.RadioBox({
			element: '#radio2',
			label: 'testing radio 2',
			wrapper: 'div',
			create: function() {
				console.log('Radiobox: Create');
			},
			check: function(event) {
				console.log('Radiobox: Check', this, event);
			},
			uncheck: function(event) {
				console.log('Radiobox: Uncheck', this, event);
			},
			push: function(event) {
				console.log('Radiobox: Push', this, event);
			},
			clear: function(event) {
				console.log('Radiobox: Clear', this, event);
			}
		});

		var radio3 = new Nokia.RadioBox({
			element: '#radio3',
			label: 'testing radio 3'
		});

		var optionGroup = new Nokia.OptionGroup({
			element: '#optiongroup',
			title: 'Option Group 1'
		});

		optionGroup.addItem(radio1);
		optionGroup.addItem(radio2);
		optionGroup.addItem(radio3);
		
		/*
		 * Hide splash when its all done.
		*/
		
		Nokia.hideSplash();

	};
	
	/*
	 * Show splash while loading components.
	*/
		
	Nokia.showSplash('<span>loading</span>');
	
	Nokia.use('optiongroup', 'radiobox', init);

</script>

</body>
</html>